<template>
  <div class="icesoft-logo px-4">
    <div class="fill-width fill-height d-flex align-center cursor-pointer" @click="toHomePage">
      <img alt="logo" :src="state.logo" height="32" width="32" />

      <el-tooltip
        v-if="!collapse"
        :content="state.title"
      >
        <el-text class="w-100px title" truncated :style="{width:collapse?'0':'auto'}">{{ state.title }}</el-text>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import Logo from "@/assets/logo.png";
import { useSettingStore } from "~/store/modulers/setting";
import { storeToRefs } from "pinia";
import { useUserStore } from "~/store/modulers/user";
import { onMounted, reactive } from "vue";
import { ImageApi } from "~/api/system/file/image.api";
import { useRouter } from "vue-router";
import { useMenuStore } from "~/store/modulers/menu";

const settingStore = useSettingStore();
const { collapse } = storeToRefs(settingStore);

const userStore = useUserStore();
const menuStore = useMenuStore();
const userData = storeToRefs(userStore);
const imageApi = new ImageApi();
const router = useRouter();

const state = reactive<any>({
  logo: Logo,
  title: "Ice Soft Admin",
});

function toHomePage() {
  router.push("/home");
  menuStore.setDefaultActive("/home");
}

onMounted(() => {
  requestAnimationFrame(() => {
    setTimeout(() => {
      getLogo();
      const data = userData.user.value.company?.settingList?.find(item => item.code == "title");
      if (data?.value) {
        state.title = data.value;
      }
    }, 100);
  });
});

async function getLogo() {
  const data = userData.user.value.company?.settingList?.find(item => item.code == "logo");
  if (data?.value) {
    state.logo = await imageApi.getImg(data.value);
  }
}

</script>

<style scoped lang="scss">
.icesoft-logo {
  height: 60px;

  .title {
    color: white;
    font-size: 20px;
    margin-left: 8px;
    line-height: 38px;
    height: 32px;
    font-family: Consolas, sans-serif;
    transition: width 0.2s ease-in-out;
  }
}
</style>
